<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="0" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="${request.contextPath}/resources/image/desktop_logo-57.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="${request.contextPath}/resources/image/desktop_logo-72.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="${request.contextPath}/resources/image/desktop_logo-114.png">
    <title>100%喜帖</title>
    <link rel="stylesheet" href="${request.contextPath}/resources/css/bootstrap.min.css">
    <link rel="stylesheet" href="${request.contextPath}/resources/css/style.css">
    <link rel="stylesheet" href="${request.contextPath}/resources/css/payAndShare.css">
    <link rel="stylesheet" href="${request.contextPath}/resources/css/jquery.bootstrap.css">
    <style>
        body:before {
            content: ' ';
            position: fixed;
            z-index: -1;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: url(${request.contextPath}/resources/image/template_bg.jpg) center 0 no-repeat;
            background-size: cover;
        }
    </style>
	
</head>
<body style="background-image: url(${request.contextPath}/resources/image/template_bg.jpg); background-attachment: fixed;">
<!-- Modal -->
<div class="modal fade" id="focusesUs" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm" role="document" style="padding: 2rem;">
        <div class="modal-content">
            <div class="modal-header" style="border: none; padding-bottom: 0;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12">
                        <h4 style="text-align: center; color: #ff3261">公众号：百分百喜帖</h4>
                        <img src="${request.contextPath}/resources/image/2weima.png">
                        <h3 style="text-align: center; color: #ff3261; margin-top: 1rem;">长按关注我们</h3>
                        <ul class="list-unstyled">
                            <li style="text-align: center; color: #ff3261;">制作属于自己的结婚请柬</li>
                            <li style="text-align: center; color: #ff3261;">www.100hunqing.cn</li>
                        </ul>
                        <p class="text-center"><img src="${request.contextPath}/resources/image/login_small.png"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="share-card-model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm" role="document" style="padding: 1rem; margin-top: 10rem">
        <div class="modal-content" style="border-radius:20px;">
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="fenxiang_layout">
                            <div class="fenxiang_header">
                                <h4>如何分享 SHARE</h4>
                            </div>
                            <form style="margin-top: 30px" class="login-form">

                                <div align="center">
                                    <img width="100%" src="${request.contextPath}/resources/image/fenxiangyindao.png"/>
                                </div>
                                <div style="margin: 20px auto;width: 165px;">
                                    <button type="button" class="login_btn" id="okBtn">知道了</button>
                                </div>
                                <div class="login_span"></div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--pay&share modal start-->
<div class="modal fade" id="shareInfor" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="margin-top:25%">
    <div class="modal-dialog modal-sm" role="document" style="padding: 1rem;">
        <div class="modal-content" style="border-radius:20px;">
        	<div class="modal-header" style="border: none; padding-bottom: 0;">
        		<img width="100%" src="${request.contextPath}/resources/image/payShareHeader.png"/>
        	</div>
            <div class="modal-body" align="center">
                <div>
                	<input type="text" class="form-control reste_input_shareInfor" style="background-color: #ff5c81;width:16rem;" id="payCode">
                    <div align="center">
                        <img width="100%" src="${request.contextPath}/resources/image/payShareBody.png"/>
                    </div>
                    <div style="margin: 5px auto;width: 165px;">
	                	<button type="submit" class="pay_submit_btn" id="btn-pay-next">下一步</button>
	                </div>
	                <p class="text-center"><img width="20%" src="${request.contextPath}/resources/image/login_small.png"></p>
                </div>
            </div>
        </div>
    </div>
</div>
<!--pay&share modal end-->

<!--modal start-->
<div class="modal fade" id="deleteModal" style="top:20%">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">提示</h4>
      </div>
      <div class="modal-body">
        <p>删除的请柬不可恢复，确认删除？</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="modal-delete-btn">删除</button>
      </div>
    </div>
  </div>
</div>
<!--modal end-->



<div class="container-fluid">
    <div class="row">
        <div id="mycard-wrapper">
            <div class="mycard_top">
                <div class="template_header">
	                <a href="${request.contextPath}/templates/v12"><img style="height: 25px; width: auto" src="${request.contextPath}/resources/image/icon_upload.png"></a>
                    <a href="${request.contextPath}/templates/v12"><span class="icon_home"></span></a>
                </div>
                <div class="template_title">
                    <h4>我的喜帖 MY CARDS</h4>
                </div>
            </div>
            <div class="mycard_main">
                <div class="row">
					<div class="col-xs-12">
						<#if (myCards?size = 0)>
							还没有喜帖，<a href="${request.contextPath}/templates/v12">去选择模板制作吧</a>
						</#if>
						<#list myCards as myCard>
						<div class="template_box">
							<div class="template_con" style="float: left; width: 48%;">
								<a href="${request.contextPath}/cards/${myCard.weddingInvitationId}/preview/v12">
									<img src="${request.contextPath}/resources/image/${myCard.preview}">
								</a>
							</div>
							<div class="mycard_info">
								<div id="weddingInvitationId" style="display:none;">${myCard.weddingInvitationId}</div>
								<div style="position: absolute; top:0; color: #ff3262; font-size: 0.9rem;">${myCard.name}</div>
								<small style="position: absolute; top:18px; font-size: 70%; color: #797878; ">${myCard.subname}</small>
                                <div style="width: 85%; position: absolute;  border-top: 1px solid #797878; top:38px;"></div>
								
                                <div style="padding-top: 28px;"><span style="color: #797878; font-size: 0.8rem;">新郎:</span> <span style="color:#ff3262;font-size: 0.7rem;">${myCard.bridegroom}</span></div>
								<div style="margin-top: -6px;"><span style="color: #797878; font-size: 0.8rem;">新娘:</span> <span style="color:#ff3262;font-size: 0.7rem;">${myCard.bride}</span></div>
								<div style="margin-top: -6px;"><span style="color: #797878; font-size: 0.8rem;">婚礼日期:</span> <span style="color:#ff3262;font-size: 0.7rem;">${myCard.weddingDay}</span></div>
                                <div style="margin-top: -6px;">
                                    <span style="color: #797878; font-size: 0.8rem;">婚礼地址:</span>
                                </div>
                                <p style="color:#ff3262; font-size: 0.7rem;margin-bottom:1rem;">
								    ${myCard.weddingHotel}<br>
								    ${myCard.weddingAddress}<br>
							    </p>
							
							    <div class="card_info_btn">
								   <a href="javascript:void(0)"><img class="edit_btn" src="${request.contextPath}/resources/image/edit_btn.png" onclick="editInvitation(${myCard.weddingInvitationId})"></a>
								   <a href="javascript:void(0);"><img class="share_btn" style="margin-left: 15px;" src="${request.contextPath}/resources/image/share_btn.png" onclick="shareBtnClick(${myCard.weddingInvitationId},${myCard.isPayed})"></a>
								</div>
								
							</div>
							<small style="position: absolute; left: 52%; bottom: 7px; color: #797878; font-size: 0.6rem;">创建时间:${myCard.createdAt}</small>
						    <span style="position: absolute; right: 0; bottom: 7px;">
						    	<a href="javascript:void(0);">
						    		<img style="width: 60%;" src="${request.contextPath}/resources/image/icon_delete_btn.png" onclick="deleteInvitation(${myCard.weddingInvitationId})">
						    	</a>
						    </span>
						</div>
					    </#list>
					    <input type="hidden" id="selectedInvitationId">
					    <input type="hidden" id="selectedInvitationIsPayed">
					</div>
				</div>
			</div>
        </div>
    </div>
</div>
<script src="${request.contextPath}/resources/js/jquery-2.1.4.min.js"></script>
<script src="${request.contextPath}/resources/js/bootstrap.min.js"></script>
<script src="${request.contextPath}/resources/js/jquery.bootstrap.min.js"></script>
<script>
	function shareBtnClick(invitationId,isPayed){
		$("#selectedInvitationId").val(invitationId);
		if(isPayed == 0){
			$('#shareInfor').modal();
		}else if(isPayed == 1){
			$('#share-card-model').modal();
		}
	}
	
	function editInvitation(invitationId){
		window.location.href = '${request.contextPath}/edit/'+invitationId+'/v12';
	}
	
	function deleteInvitation(invitationId){
		$("#selectedInvitationId").val(invitationId);
		$('#deleteModal').modal();
	}
	
    $(document).ready(function () {
        $("#okBtn").click(function(){
        	window.location.href='${request.contextPath}/cards/'+$("#selectedInvitationId").val()+'/v12';
        });
        
        $("#modal-delete-btn").click(function(){
        	window.location.href='${request.contextPath}/delete/'+$("#selectedInvitationId").val()+'/v12';
        });
        
    	$("#btn-pay-next").click(function(){
				var payCode = $("#payCode").val();
				if(payCode == "" || payCode == null){
					alert("请输入支付码");
					return;
				}else{
					$.ajax({  
			        type : "POST",  //提交方式  
			        url : "${request.contextPath}/cards/"+$("#selectedInvitationId").val()+"/payByCode",//路径 ,
					data : 'payCode='+$('#payCode').val(),
			        success : function(result) {//返回数据根据结果进行相应的处理  
			            if(result.status == 'success'){
			            	$('#share-card-model').modal();
			            	$('#shareInfor').modal("hide");
			            	//window.location.href="${request.contextPath}/share/${invitationId}/v12";
						}else{
							$('.template_title').trigger("click");
						    alert(result.error);
						}
			        }  
			    });
				}
			});
    });
</script>
</body>
</html>